
<template>
   
        <div>
            <ul id="myMenu">
              <li><div class="logo"><img src="./assets/logo.png" alt=""></div></li>
          <li data-menuanchor="home" class="menuList"><a href="#home">首页</a></li>
          <li data-menuanchor="aboutus" class="menuList"><a href="#aboutus">关于</a></li>
          <li data-menuanchor="product" class="menuList"><a href="#product">产品</a></li>
          <li data-menuanchor="news" class="menuList"><a href="#news">新鲜事</a></li>
       
        </ul>
        <full-page :options="options">
         
           <div class="section">
             <!-- section 1 -->
            <ul id="titletop"><li></li>
            <li ><div id="leftheng"></div></li>
            <li id="centertitle">首页</li>
           <li ><div id="leftheng"></div></li>
            <li></li></ul>
             <IndexSwipper></IndexSwipper></div>
           <div class="section">
             <!-- section 2 -->
              <ul id="titletop"><li></li>
            <li ><div id="leftheng"></div></li>
            <li id="centertitle">关于</li>
           <li ><div id="leftheng"></div></li>
            <li></li></ul>
             <Aboutus></Aboutus>
           </div>
             <div class="section">
               <!-- section 3 -->
                <ul id="titletop"><li></li>
            <li ><div id="leftheng"></div></li>
            <li id="centertitle">产品</li>
           <li ><div id="leftheng"></div></li>
            <li></li></ul>
               <Product></Product>
             </div>
               <div class="section">
                 <!-- section 4 -->
                  <ul id="titletop"><li></li>
            <li ><div id="leftheng"></div></li>
            <li id="centertitle">新鲜事</li>
           <li ><div id="leftheng"></div></li>
            <li></li></ul>
                 <Newspage></Newspage>
               </div>
             
              <!-- <div class="section">section 4
                 <Team></Team>
               </div> -->
        </full-page>
        </div>
</template>


<script>
import '@/static/css/fullpage.min.css';
import Aboutus from './components/Aboutus';
import IndexSwipper from './components/Indexfirst';
import Product from './components/Product';
import Newspage from './components/News';
// import Team from './components/Team'
export default {
  
    name: '',
    
    data () {
        return {
            options: {
                licenseKey: 'null',
                 verticalCentered:true,//定义每一页的内容是否垂直居中
                  scrollOverflow: true,
                controlArrows:true,//是否通过箭头控制slide幻灯片
                loopHorizontal:true,//slide幻灯片是否循环滚动
                scrollBar: false,//flase不显示侧边
                afterLoad: this.afterLoad,//滚动到某一屏后的回调函数
               
                menu: '#myMenu',
                // navigation: true,
                // navigationPosition:'right',//导航小圆点的位置
                anchors: ['home', 'aboutus', 'product', 'news'],
                //为每个section设置背景色
                sectionsColor: []
            },
           
            }
           
        },
        methods:{
          
        },
        components:{
          Aboutus,
          IndexSwipper,
          Product,
          Newspage,
          // Team
        }

        
    

    
}
</script>
 
<style lang="scss" scoped>
// 导航栏
// #nav{
//   display: flex;
// }
*{
  margin: 0;
  padding: 0;
}
.logo{
  width: 80px;
  height: 40px;
  margin: 0 20px;
}
.logo img{
  width: 80px;
}

ul#myMenu {
    display: flex;
    list-style: none;
    text-decoration: none;
     position: relative;
    z-index: 99999999;
    
}
 li.menuList{
   flex:1;
  text-align: center;

 }
a{
   color: black;
  text-decoration:none;
 }

 .active{
     border-bottom: 2px solid #008ABB;
 }
//  对应样式改变因为a标签具有自己的text样式不会继承父级的样式
 #myMenu .active a {
    color: #008ABB;

}
#titletop{
  display: flex;
  list-style: none;
}
#titletop li{
  flex: 1;
}
#centertitle{
  color: #008ABB;
  // font-size: 2em;
  letter-spacing: 1em;
  font-weight: 400;
  margin: 2em 0;
}
div#leftheng {
    background-color: rgba(141, 203, 207, 0.788);
    height: 1px;
    margin: 3em 0;
    }
</style>